<template>
	<view class="table">
		<view class="item" v-for="item in props.data" :key="item.id" @click="gorouter(item)">
			<view class="item_picture">
				<view class="picture">
					<image :src="item.src" mode=""></image>
				</view>
			</view>
			<text style="font-size: 13px">{{ item.title }}</text>
		</view>
	</view>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps(['data']);
const gorouter = (item) => {
	if (item.title == '手机开门') {
		uni.navigateTo({
			url: '/pages/server/views/PhoneDoor/PhoneDoor'
		});
		return;
	}
	if (item.title == '生活缴费') {
		uni.navigateTo({
			url: '/pages/server/views/LifePay/LifePay'
		});
		return;
	}
	if (item.title == '邀请访客') {
		uni.navigateTo({
			url: '/pages/server/views/visitors/visitors'
		});
		return;
	}
	if (item.title == '手机开门') {
		uni.navigateTo({
			url: '/pages/server/views/PhoneDoor/PhoneDoor'
		})
		return
	}
	if (item.title == '生活缴费') {
		uni.navigateTo({
			url: '/pages/server/views/LifePay/LifePay'
		})
		return
	}
	if (item.title == '访客邀请') {
		uni.navigateTo({
			url: '/pages/server/views/visitors/visitors'
		})
		return
	}
	if (item.title == "停车缴费") {
		uni.navigateTo({
			url: '/pages/server/views/StopCarPay/StopCarPay'
		})
		return
	}
	if (item.title == "维修上报") {
		uni.navigateTo({
			url: '/pages/server/views/MaintenanceReport/MaintenanceReport'
		})
		return
	}
	if (item.title == "投诉建议") {
		uni.navigateTo({
			url: "/pages/server/views/Recommendations/Recommendations"
		})
		return
	}
	if (item.title == "社区活动") {
		uni.navigateTo({
			url: "/pages/server/views/Communityactivities/Communityactivities"
		})
		return
	}
	if (item.title == "公告公示") {
		uni.navigateTo({
			url: "/pages/server/views/Announcement/Announcement"
		})
		return
	}
	if (item.title == "房屋租赁") {
		uni.navigateTo({
			url: '/pages/server/views/HouseRentals/HouseRentals'
		})
		return
	}
	if (item.title == "联系物业") {
		uni.navigateTo({
			url: '/pages/server/views/ContactTheProperty/ContactTheProperty'
		})
		return
	}
}
</script>

<style lang="scss">
.table {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.item {
		width: 23%;
		height: 196rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin: 6rpx 1%;

		.item_picture {
			width: 140rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			border-radius: 30rpx;
			justify-content: center;

			.picture {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
}
</style>
